<template>
  <div class="destination-wrap">
    <div class="destination-wrap-lable">
      <div class="img_box">
        <img src="https://b1-q.mafengwo.net/s15/M00/0F/5F/CoUBGV28HDuALpzxABR490kDN0M39.jpeg" alt="">
      </div>

      <div class = "arti_box">
        <div class="arti">
          <router-link to = ""><h1>神仙海岛的三款热门玩法，去普吉一定不能错过</h1></router-link>
          <p>关于泰国普吉岛，这个多面风情的岛屿，常年位于境外旅游热搜榜前列，第一次去的人，容易被它的热带海岛风情和高性价比吸引到想再二刷；第N次去的人，更是因为每次都能发现普吉的新玩法，让人想再多宠幸一遍。</p>
        </div>
        <router-link to = "">阅读全文</router-link>
      </div>

      <div class = "search_box">
        <h3>Don't fear the unknown</h3>
        <el-input @keyup.13.native = "search" class = "input_item" v-model="input" placeholder="请输入内容"></el-input>
        <el-button class = "search_btn" @click = "search" slot="append" icon="el-icon-search"></el-button>
        <p>
          <router-link to = "">三亚</router-link>
          <router-link to = "">泰国</router-link>
          <router-link to = "">广州</router-link>
          <router-link to = "">首尔</router-link>
          <router-link to = "">澳门</router-link>
        </p>
      </div>

      <div @click = "scroll" class = "down_btn">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorkspaceJsonLable",
  data() {
    return {
      input: ''
    };
  },

  mounted() {
    this.re_style();
  }, 

  methods: {
    re_style() {
      // let width = window.screen.width;
      let width = document.body.clientWidth;            //获取网页可见区域宽度
      let arti_box = document.getElementsByClassName("arti_box")[0];
      let search_box = document.getElementsByClassName("search_box")[0];
      
      if(width < 1500) {
        arti_box.className = "min_arti_box";
        search_box.className = "min_search_box";
        
      }else if(width >= 1500) {
        arti_box.className = "arti_box";
        search_box.className = "search_box";
      }    
    },
    scroll() {
      window.scrollTo(0, 650);
      
    },
    search() {            //搜索框

      this.$http.post('/destSearch', {title: this.input}).then(result => {
        this.$store.commit('load_dest_detail', result.data.data)
        // this.$store.commit('load_dest_detail', 2)
        window.scrollTo(0, 650);

      })
      
    }
  },
  created(){
    console.log(this.$route.query.title); 
    this.input = this.$route.query.title
  },

};
</script>

<style lang="scss" scoped>
.destination-wrap {
  min-width: 1200px;
  width: 100%;
  background: rgb(255, 255, 255);
  overflow: hidden;
  .destination-wrap-lable {
    position: relative;
    width: 100%;
    min-width: 1250px;
    height: 650px;
    margin: 0 auto;
    background: rgb(255, 255, 255);
    overflow: hidden;
    .img_box {
      width: 100%;
      min-width: 1250px;
      height: 650px;
      img {
        margin-top: -14%;
        width: 100%;
      }
    }
    .arti_box {
      width: 610px;
      position: absolute;
      top: 220px;
      right: 7vw;
      .arti {
        width: 600px;
        color: white;
        border-right: 5px solid white;
        a {
          color: white;
          text-decoration: none;
          h1 {
            font-weight: 400;
            font-size: 50px;
            &:hover {
              color: #41c1ec;
            } 
          }
        }
        P {
          font-size: 18px;
          line-height: 37px;
        }
      }
      > a {
        color: white;
        font-size: 24px;
        &:hover {
          color: #41c1ec;
        }       
      }
    }
    .min_arti_box {          //小分辨率样式
      width: 550px;
      position: absolute;
      top: 220px;
      right: 0;
      .arti {
        width: 470px;
        color: white;
        border-right: 5px solid white;
        a {
          color: white;
          text-decoration: none;
          h1 {
            font-weight: 400;
            font-size: 30px;
          }
        }
        P {
          font-size: 16px;
          line-height: 37px;
        }
      }
      > a {
        color: white;
        font-size: 18px;
        &:hover {
          color: #41c1ec;
        }        
      }
    }
    .search_box {
      color: white;
      width: 400px;
      height: 110px;
      background: rgba(0,0,0,.4);
      position: absolute;
      top: 255px;
      left: 18vw;
      padding: 15px;
      border-radius: 10px;
      h3 {
        font-weight: 400;
        margin-bottom: 10px;
      }
      .input_item {
        margin: 5px 0;
        width: 339px;
      }
      .search_btn {
        background: #41c1ec;
      }
      p {
        a {
          text-decoration: none;
          color: white;
          font-size: 14px;
          margin-right: 5px;
        }
      }
    }
    .min_search_box {         //小分辨率样式样式
      color: white;
      width: 360px;
      height: 100px;
      background: rgba(0,0,0,.4);
      position: absolute;
      top: 255px;
      left: 11vw;
      padding: 15px;
      border-radius: 10px;
      h3 {
        font-weight: 400;
        margin-bottom: 10px;
      }
      .input_item {
        margin: 5px 0;
        width: 299px;
      }
      .search_btn {
        background: #41c1ec;
      }
      p {
        a {
          text-decoration: none;
          color: white;
          font-size: 14px;
          margin-right: 5px;
        }
      }
    
    }
    .down_btn {
      width: 40px;
      height: 28px;
      position: absolute;
      left: 50%;
      bottom: 20px;
      margin-left: -20px;
      background: url("../.././assets/home_detail_icon/down.png") no-repeat;
      cursor: pointer;
    }
   
  }
}
</style>